<template>
	<view>
		<pageHeader  @back='back' :fixed='true' :border='true'>
			<text>内容示例</text>
		</pageHeader>
		<view style="height: 16rpx;width: 750rpx;background-color: #F5F5F5;"></view>
		<editor id="editor" :read-only='true' class="ql-container designExample"   @ready="onEditorReady" ></editor>
	</view>
</template>

<script>
	import pageHeader from "@/components/header/header.vue"
	export default {
		components: {pageHeader},
		data() {
			return {
				html:{
					ops:[{
						insert:"户型图\r\n"
					},
					{
						insert:{
							image:"/static/img/20200210110217.jpg"
						}
					},
					{
						insert:"\r\n三房两厅这样的布局，科学合理利用空间，很宽敞。\r\n\r\n客厅展示图\r\n"
					},	
					{
						insert:{
							image:"/static/img/20200210110217.jpg"
						}
					},
					{
						insert:"\r\n我喜欢的客厅哦！\r\n\r\n茶室展示图\r\n"
					},
					{
						insert:{
							image:"/static/img/20200210110217.jpg"
						}
					},
					{
						insert:"\r\n朋友来访可以约一起喝茶。\r\n\r\n视频效果图\r\n"
					},
					{
						insert:{
							image:"/static/img/20200210110217.jpg"
						}
					},
					{
						insert:"\r\n可以完整浏览整个家装设计各角落。\r\n"
					},
					]
				}
			};
		},
		onLoad(e) {
			console.log(JSON.stringify(this.html))
		},
		methods: {
			
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			onEditorReady(){
				uni.createSelectorQuery().select('#editor').context((res) => {
				    res.context.setContents({
						delta:this.html
					})
				}).exec()
			}
		},
	}
</script>

<style lang="scss">
.top_padding{
	height: 42rpx;
	background-color: #FFFFFF;
	position: fixed;
	width: 750rpx;
	top: 85rpx;
	z-index: 995;
	view{
		position: absolute;
		bottom: 0;
		left: 0;
	}
}
#editor{
	height: unset;
	min-height:  425rpx;
	overflow-y: unset;
}
</style>
